<template>
  <div class="header-container">
    <router-link to="/home" custom v-slot="{ isActive, navigate }">
      <div :class="{ active: isActive }" @click="navigate">
        <svg
          t="1681048810748"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2697"
          width="20"
          height="20"
        >
          <path
            d="M485.333333 52.053333a42.666667 42.666667 0 0 1 53.333334 0l298.282666 238.592 170.282667 130.133334a42.666667 42.666667 0 0 1-51.797333 67.797333l-170.666667-130.432-0.768-0.597333L512 139.946667l-277.333333 221.866666v523.52h170.666666a42.666667 42.666667 0 1 1 0 85.333334h-213.333333a42.666667 42.666667 0 0 1-42.666667-42.666667V434.090667L70.4 501.76a42.666667 42.666667 0 0 1-55.466667-64.768l149.333334-128a42.666667 42.666667 0 0 1 1.066666-0.938667l320-256zM832 512a42.666667 42.666667 0 0 1 42.666667 42.666667v373.333333a42.666667 42.666667 0 0 1-42.666667 42.666667H597.333333a42.666667 42.666667 0 1 1 0-85.333334h192V554.666667a42.666667 42.666667 0 0 1 42.666667-42.666667z"
            fill="#75C82B"
            p-id="2698"
          ></path>
          <path
            d="M490.666667 682.666667a42.666667 42.666667 0 0 0-42.666667 42.666666v160h128V725.333333a42.666667 42.666667 0 0 0-42.666667-42.666666h-42.666666z m-128 42.666666a128 128 0 0 1 128-128h42.666666a128 128 0 0 1 128 128v202.666667a42.666667 42.666667 0 0 1-42.666666 42.666667h-213.333334a42.666667 42.666667 0 0 1-42.666666-42.666667V725.333333z"
            fill="#75C82B"
            p-id="2699"
          ></path>
        </svg>
        网站收藏
      </div>
    </router-link>
    <router-link to="/imageGallery" custom v-slot="{ isActive, navigate }">
      <div :class="{ active: isActive }" @click="navigate">
        <svg
          t="1681048859567"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3770"
          width="20"
          height="20"
        >
          <path
            d="M917.09952 84.6848H114.41152c-32.83968 0-59.45856 26.624-59.45856 59.45856v772.96128c0 32.83456 26.624 59.45344 59.45856 59.45344h802.688c32.83456 0 59.45344-26.61888 59.45344-59.45344V144.13824c0-32.82944-26.61888-59.45344-59.45344-59.45344z"
            fill=""
            p-id="3771"
          ></path>
          <path
            d="M917.09952 54.95296H114.41152c-32.83968 0-59.45856 26.624-59.45856 59.45856V887.35232c0 32.8448 26.624 59.46368 59.45856 59.46368h802.688c32.83456 0 59.45344-26.61888 59.45344-59.46368V114.41152c0-32.83456-26.61888-59.45856-59.45344-59.45856z"
            fill="#ECEAE0"
            p-id="3772"
          ></path>
          <path
            d="M872.50432 114.41152H159.00672a44.5952 44.5952 0 0 0-44.5952 44.5952V590.07488h802.688V159.00672a44.5952 44.5952 0 0 0-44.5952-44.5952z"
            fill="#98DCF0"
            p-id="3773"
          ></path>
          <path
            d="M613.63712 411.55584l-154.94144 178.51904h309.86752z"
            fill="#699B54"
            p-id="3774"
          ></path>
          <path
            d="M586.82368 590.07488l-206.53568-237.9776-206.5408 237.9776H114.41152V694.12352a44.5952 44.5952 0 0 0 44.5952 44.5952h713.4976a44.5952 44.5952 0 0 0 44.5952-44.5952v-104.05376h-330.27584z"
            fill="#80BB67"
            p-id="3775"
          ></path>
          <path
            d="M768.44544 263.05536m-59.45856 0a59.45856 59.45856 0 1 0 118.91712 0 59.45856 59.45856 0 1 0-118.91712 0Z"
            fill="#FFE68E"
            p-id="3776"
          ></path>
        </svg>
        图片收藏
      </div>
    </router-link>
  </div>
</template>

<script setup></script>

<style lang="stylus" scoped>
.header-container
  display flex
  background #1e90ff
  height 44px
  div
    padding-left 10px
    padding-right 20px
    display flex
    justify-content center
    align-items center
    color #ccc
    cursor pointer
    &.active
      color #fff
    svg
      margin-right .2rem
      color #ccc
    &.active svg
       fill #fff
</style>
